import styled from "styled-components";

export const Wrapper = styled.div`
`;


export const BannerWrapper = styled.div`
    width: 100%;
    height: 285px;
    display: flex;
    // 获取js中传递过来的参数
    background: url(${props => props.bgImage}) center center/6000px;;
    .content {
        position: relative;
        display: flex;
        justify-content: center;
        button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 63px;
            cursor: pointer;
        }
        .prev {
            left: -10px;
            background-position: 0 -360px;
            :hover {
                background-position: 0 -430px;
            }
        }
        .next {
            right: -10px;
            background-position: 0 -508px;
            :hover {
                background-position: 0 -578px;
            }
        }
    }
    .left {
        width: 730px;
        /* height: 100%; */
        display: flex;
        .banner-carousel {
            width: 730px;
            height: 285px;
        }
        .banner-carousel-wrapper {
            width: 100%;
            height: 285px;
        }
        .banner-carousel-img {
            width: 100%;
            height: 100%;
        }
    }
    .right {
        position: relative;
        width: 254px;
        height: 100%;
        background-position: 0 0;
        .desc {
            position: absolute;
            bottom: 8px;
            color: #8d8d8d;
            height: 26px;
            line-height: 26px;
            width: 100%;
            text-align: center;
            font-size: 12px;
        }
        .download-link {
            position: absolute;
            width: 214px;
            height: 56px;
            display: inline-block;
            left: 19px;
            bottom: 43px;
            :hover {
                background-position: 0 -290px;
            }
        }
    }
`;

export const ContentWrapper = styled.div`
    display: flex;
    justify-content: center;
    .left {
        width: 730px;
        border-left: 1px solid #ccc;
        padding: 20px;
    }
    .right {
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
        width: 254px;
        .login {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 125px;
            background-position: 0 0;
            p {
                color: #666;
                width: 205px;
                margin: 0 auto;
                padding: 16px 0;
                line-height: 22px;
                font-size: 12px;
            }
            .login-btn {
                width: 100px;
                height: 31px;
                line-height: 31px;
                text-align: center;
                color: #fff;
                text-shadow: 0 1px 0 #8a060b;
                background-position: 0 -195px;
                cursor: pointer;
                text-decoration: none;
                a:hover {
                    background-position: 110px -195px;
                }
            }
        }
    }
`;

